<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style>
 

/* 头部样式 */
.header {
  background-color:grey;
  padding: 10px;
  text-align: center;
  color: white;
}

/* 导航条 */
.topnav {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  margin:0;
	padding:0;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 25px;
}

/* 链接 - 修改颜色 */
.topnav a:hover:not(active) {
  background-color: #ddd;
  color: black;
  border-radius: 25px;
}
a
{
    display:block;
    width:100px;
}
/* 卡片 */
.card {
  background-color:red;
  padding: 20px;
  margin-top: 20px;
}
.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
    display: none;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 100;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 25px;
}
.dropdown-content a {
    color: black;
  
    width:100px;
    
    display:block;
}
.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

/* 底部 */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
.colright_banner{
    
    background-image: url(https://img.mianfeiwendang.com/pic/6ea1a900bfbb3316fecdf8db/3-810-jpg_6-1080-0-0-1080.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: .08rem;
}
.error{
            color: red;
        }
</style>

<script>
  
function validateForm() {
    var x = document.forms["form1"]["number"].value;
    if (x == null || x == "") {
        
        return false;
    }
}
function validateForm2() {
    var x = document.forms["form1"]["email"].value;
    if (x == null || x == "") {
       
        return false;
    }
}
function validateForm3() {
    var x = document.forms["form1"]["username"].value;
    if (x == null || x == "") {
       
        return false;
    }
}
function checkemail(var1){
 var obj = document.getElementById(var1);
 var reg = new RegExp(/^\S+@\S+\.\S{2,}$/);
 if(!reg.test(obj.value)) 
 return false;
 else
 return true;
}
function printError(elemId, hintMsg) {
            document.getElementById(elemId).innerHTML = hintMsg;
        }


	window.onload = function(){
     var oBtn = document.getElementById('regBtn');
     var name =document.forms["form1"]["username"].value;
     oBtn.onclick = function(){
       if(validateForm3()==false)
       printError("nameErr", "名称不能为空");
       else
       printError("nameErr", "");

       if(validateForm()==false)
       {
        printError("numberErr", "电话不能为空");
       }
       else
       printError("numberErr", "");
       if(validateForm2()==false)
      {
        printError("emailErr", "Email不能为空");
      }
      else
      printError("emailErr", "");
      if(checkemail("email")==false&&validateForm2()!=false)
     printError("emailErr", "Email格式错误");
     if(validateForm()!=false&&checkemail("email")!=false&&validateForm2()!=false)
       alert("感谢您的反馈");
     };
};


	</script>
</head>
<body>
  <div class="header">
    <h1>
      狗狗之家</h1>
      <img src="https://uploadfile.huiyi8.com/2018/af/6c/66/35/412054.jpg" alt="狗狗大全" width="200" height="200">
  </div>
   
  <div class="topnav">
    <a  href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/runoob.html">首页</a>
    <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-1.html">狗狗大全</a>
    <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-3.html">狗狗日常用品</a>
     <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-2.html">狗粮</a>
     <a class="active" href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/%E8%A1%A8%E5%8D%95.html" style="float:right">意见反馈</a>
  </div>
  <div class="colright_banner">
  <h2 align="center" >网站意见反馈</h2>
  <form id="form" name="form1">
    <table border="1" width="650" height="650" cellpadding="10" cellspacing="0" align="center" >
      <tr><td>姓名</td><td><input type="text" name="username" style="background-color: transparent;" /><span class="error" id="nameErr"></span></td></tr>
      <tr><td>性 别</td><td>
        <input type="radio" name="gender" value="女">女
        <input type="radio" name="gender" value="男">男
     </td></tr>
      <tr><td>联系电话</td><td><input type="text" name="number" style="background-color: transparent;"/><span class="error" id="numberErr"></span></td></tr>

      <tr><td>email</td><td><input type="text" id="email" style="background-color: transparent;"/><span class="error" id="emailErr"></span></td></tr>
      <tr><td>反馈</td><td><textarea name="info" rows="20" cols="60" style="background-color: transparent;"></textarea>
       </td></tr>
      <tr><td colspan="2" align="center">
         <input type="button" value="提 交" id="regBtn">
        
      </td></tr>
    </table>
  </form>
</div>
<div class="footer">
  <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6oOKw7TgzTGKMz9lELv9xQHaHa?w=170&h=180&c=7&r=0&o=5&dpr=1.65&pid=1.7" alt="狗狗大全" width="50" height="50">
</div>
</body>
</html>